<template>
  <div class="detail">
    <van-nav-bar
      title="详情页"
      left-text="返回"
      right-text="..."
      left-arrow
      @click-left="$router.go(-1)"
    />
    <!-- 头部 -->
    <div
      class="shop-header"
      style=
        backgroundImage:url:https://bpic.588ku.com/back_origin_min_pic/21/05/26/18729f9fa39d20694151d102f32fdcb1.jpg!/fw/750/quality/99/unsharp/true/compress/true>
      <div class="left">
        <img :src="shopinfo.info && shopinfo.info.picUrl" alt="" />
        <span>{{ shopinfo.info && shopinfo.info.name }}</span>
      </div>
      <div
        class="right"
        style="color: red"
        @click="cancel_collect(shopinfo.info)"
        v-if="isCollect"
      >
        ❤
      </div>
      <div
        class="right"
        style="color: white"
        @click="collect(shopinfo.info)"
        v-else
      >
        ❤
      </div>
    </div>

    <!-- 商品 -->
    <div class="box">
      <div class="left">
        <van-sidebar v-model="currentIndex">
          <van-sidebar-item
            v-for="(item, index) in shopinfo.taglist"
            :key="index"
            :title="item.name"
          />
        </van-sidebar>
      </div>
      <div class="right">
        <div
          class="good"
          v-for="(item, index) in shopinfo.taglist &&
          shopinfo.taglist[currentIndex].goodlist"
          :key="index"
        >
          <div class="imgbox">
            <img :src="item.picture" alt="" />
          </div>
          <div class="text">
            <div class="up">
              <div class="name">{{ item.name }}</div>
              <div class="desc">{{ item.month_saled_content }}</div>
            </div>
            <div class="down">
              <div class="price">¥{{ item.min_price }}</div>
              <div class="opes">
                <span @click="subtract()">-</span>
                <span>1</span>
                <span @click="add()">+</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="button">
      <van-icon name="cart-o" size="40px"/>
    </div>
  </div>
</template>

<script>
import { mapState,mapMutations,mapGetters,mapActions } from 'vuex'
import { Dialog } from 'vant'
import { shop_shopinfo } from "../utils/api";
export default {
  data() {
    return {
      currentIndex: 0,
      shopinfo: {},
    };
  },
  computed: {
    ...mapState(["collectlist"]),
    ...mapGetters([]),
    isCollect() {
      var index = this.collectlist.findIndex((item) => {
        return item.mtWmPoiId == this.shopinfo.mtWmPoiId;
      });
      return index !== -1;
    },
  },
  methods: {
    ...mapMutations(["collect", "cancel_collect"]),
    ...mapActions([]),
  },
  mounted() {
    shop_shopinfo({ id: this.$route.params.id }).then((res) => {
      if (res.data.shopinfo) {
        //店铺正常营业
        this.shopinfo = res.data.shopinfo;
      } else {
        //店铺倒闭
        Dialog.alert({
          title: "提示",
          message: "该店铺已倒闭!",
        }).then(() => {
          this.$router.go(-1);
        });
      }
    });
  },
};
</script>

<style lang='scss' scoped>
.detail {
  .shop-header {
    display: flex;
    background-color:skyblue;
    justify-content: space-between;
    background-size: cover;
    color: white;
    background-repeat: no-repeat;
    padding: 50px 10px;
    .left {
      display: flex;
      flex: 1;
      align-content: center;
      img {
        width: 20px;
        height: 20px;
        border-radius: 50%;
      }
    }
  }
  .box {
    display: flex;
    .left {
      width: 80px;
    }
    .right {
      flex: 1;
      .good {
        display: flex;
        margin: 10px;
        .imgbox {
          width: 80px;
          margin-right: 10px;
          img {
            width: 100%;
          }
        }
        .text {
          flex: 1;
          font-size: 12px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .down {
            // width: 50px;
            display: flex;
            justify-content: space-between;
          }
        }
      }
    }
  }
  .button{
    width: 100%;
    height: 60px;
    background-color: rgba(135, 207, 235, 0.451);
    position: fixed;
    bottom: 0;
    .van-icon{
      line-height: 60px;
      margin-left: 15px;
    }
  }
}
</style>